<template>
    <div>
      <el-row>
        <el-row >
          <el-col :span="6">
            <div style="background-color: #409EFF;width: 200px;height: 100px">
              总共供应商品数量：
              <b>{{showData.t1}}</b>
              <div>
                <div style="float: left;background-color: rgb(160, 207, 255);width: 50px;height: 41px"></div>
              </div>
              <div>
                <div style="float: left;background-color: rgb(140, 197, 255);width: 50px;height: 41px"></div>
              </div>
              <div>
                <div style="float: left;background-color: rgb(179, 216, 255);width: 50px;height: 41px"></div>
              </div>
              <div>
                <div style="float: left;background-color: rgb(217, 236, 255);width: 50px;height: 41px"></div>
              </div>
            </div>
          </el-col>
          <div>

          </div>
          <el-col :span="6" class="handle">
            <div style="background-color: #409EFF;width: 200px;height: 100px">
              正在供应商品的数量：
              <b>{{showData.t2}}</b>
              <div>
                <div style="float: left;background-color: rgb(160, 207, 255);width: 50px;height: 41px"></div>
              </div>
              <div>
                <div style="float: left;background-color: rgb(140, 197, 255);width: 50px;height: 41px"></div>
              </div>
              <div>
                <div style="float: left;background-color: rgb(179, 216, 255);width: 50px;height: 41px"></div>
              </div>
              <div>
                <div style="float: left;background-color: rgb(217, 236, 255);width: 50px;height: 41px"></div>
              </div>
            </div>
          </el-col>
          <el-col :span="6" class="handle">
            <div style="background-color: #409EFF;width: 200px;height: 100px">
              停止供应商品的数量：
              <b>{{showData.t3}}</b>
              <div>
                <div style="float: left;background-color: rgb(160, 207, 255);width: 50px;height: 41px"></div>
              </div>
              <div>
                <div style="float: left;background-color: rgb(140, 197, 255);width: 50px;height: 41px"></div>
              </div>
              <div>
                <div style="float: left;background-color: rgb(179, 216, 255);width: 50px;height: 41px"></div>
              </div>
              <div>
                <div style="float: left;background-color: rgb(217, 236, 255);width: 50px;height: 41px"></div>
              </div>
            </div>
          </el-col>
          <el-col :span="6" class="handle">
            <div style="background-color: #409EFF;width: 200px;height: 100px">
              本月营收：
              <b>{{showData.t4}}</b>
              <div>
                <div style="float: left;background-color: rgb(160, 207, 255);width: 50px;height: 41px"></div>
              </div>
              <div>
                <div style="float: left;background-color: rgb(140, 197, 255);width: 50px;height: 41px"></div>
              </div>
              <div>
                <div style="float: left;background-color: rgb(179, 216, 255);width: 50px;height: 41px"></div>
              </div>
              <div>
                <div style="float: left;background-color: rgb(217, 236, 255);width: 50px;height: 41px"></div>
              </div>
            </div>
          </el-col>
        </el-row>

        <el-col :span="11" :offset="1">

          <el-row>
            <el-col :span="6" :offset="16">
              <el-date-picker
                v-model="datatime"
                @change="getdate()"
                value-format="yyyy/MM/dd"
                type="monthrange"
                range-separator="至"
                start-placeholder="开始月份"
                end-placeholder="结束月份">
              </el-date-picker>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6" :offset="10">
              <div id="main" style="width: 600px;height:400px;background-color: #fffcfc"></div>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="11" :offset="1">
          <el-row></el-row>
          <br>
          <el-row>

          </el-row>
          <el-row>
          </el-row>
          <el-row></el-row>
        </el-col>
      </el-row>
    </div>
</template>

<script>
    export default {
        name: "Supplier_home_page",
      data(){
          return{
            datatime:"",
            data1: [],
            data2: [],
            showData:{
              t1:"",
              t2:"",
              t3:"",
              t4:"",
            }
          }
      },
      methods:{
          getgysp(){
            //查询该供应商提供的商品数量
            let params = new URLSearchParams();
            params.append("pId",sessionStorage.getItem('id'));
            this.$axios.get("supplierSupplyOfGoods/queryAllgys.action",{params:params}).then(res=>{
              this.showData.t1=res.data.length;
            })
            //查询该供应商正在提供的商品数量
            params = new URLSearchParams();
            params.append("isDelete", 0);
            params.append("pId",sessionStorage.getItem('id'));
            this.$axios.get("supplierSupplyOfGoods/queryAllgys.action",{params:params}).then(res=>{
              this.showData.t2=res.data.length;
            })
            //查询该供应商停止提供的商品数量
            params = new URLSearchParams();
            params.append("isDelete", 1);
            params.append("pId",sessionStorage.getItem('id'));
            this.$axios.get("supplierSupplyOfGoods/queryAllgys.action",{params:params}).then(res=>{
              this.showData.t3=res.data.length;
            })

            // //查询该供应商本月营收
            this.$axios.get("thisMonthRevenue.action/"+sessionStorage.getItem('id'),null).then(res=>{
              this.showData.t4=res.data;
            })
          },
        getdate() {
          let params = {}
          params["startTime"] = this.datatime[0];
          params["endTime"] = this.datatime[1];
          params["loginUserId"] = sessionStorage.getItem("id")
          this.$axios.get("queryAllgysys.action", {params: params}).then(res => {
            if (res.data.length > 0) {
              this.data1 = [];
              this.data2 = [];
              this.companyRunningWater = res.data;
              this.companyRunningWater.forEach(item => {
                this.data1.push(item.rdate);
                this.data2.push(item.rmoney)
              })
            } else {
              this.data1 = [];
              this.data2 = [];
              this.$message.warning("暂无数据")
            }
            this.get()
          }).catch(error => {
            this.$message.error(error)
          })
        },
          get(){
            var _this = this
            var echarts = require('echarts');
            var myChart = echarts.init(document.getElementById('main'));

           var option = {
              xAxis: {
                type: 'category',
                data: this.data1
              },
              yAxis: {
                type: 'value'
              },
              series: [
                {
                  data: _this.data2,
                  type: 'line'
                }
              ]
            };
             myChart.setOption(option);
          }
      },mounted() {
          this.get()
      },
      created() {
        this.getdate()
        this.getgysp()
      }

    }
</script>

<style scoped>

</style>
